import {
  Button,
  Modal,
  Row,
  Space,
  Table,
  message as antdMessage,
  Col,
  Input,
  Select,
} from "antd";
import axios from "axios";
import React, { useEffect, useState } from "react";
interface UserRawState {
  nickname: string;
  avator: string;
  role: string;
  username: string;
}
const Index: React.FC = () => {
  const [list, setList] = useState<UserRawState[]>([]);
  const [editUser, setEditUser] = useState<UserRawState>({} as UserRawState);
  const [isOpen, setIsOpen] = useState(false);
  const getList = async () => {
    const resp = await axios.get("/api/user/list");
    setList(resp.data.data);
  };

  const handleDelete = async (usernmae: string) => {
    const resp = await axios.delete("/api/user/list/" + usernmae);
    const { code, message } = resp.data;
    if (code === 200) {
      antdMessage.success(message);
      getList();
    }
  };

  const handleEdit = async () => {
    const resp = await axios.post(
      "/api/user/list/" + editUser.username,
      editUser
    );
    const { code, message } = resp.data;
    if (code === 200) {
      antdMessage.success(message);
      getList();
    }
  };

  const columns = [
    {
      dataIndex: "nickname",
      title: "昵称",
      key: "nickname",
    },
    {
      dataIndex: "username",
      title: "账户",
      key: "username",
    },
    {
      dataIndex: "role",
      title: "角色",
      key: "role",
    },
    {
      dataIndex: "avator",
      title: "头像",
      key: "avator",
      render(avator: string) {
        return <img src={avator} height={50} width={50} alt="加载失败" />;
      },
    },
    {
      title: "操作",
      key: "avator",
      render(record: UserRawState) {
        return (
          <Space>
            <Button
              type="primary"
              onClick={() => {
                setIsOpen(true);
                setEditUser(record);
              }}
            >
              编辑
            </Button>
            <Button
              type="primary"
              danger
              onClick={() => handleDelete(record.username)}
            >
              删除
            </Button>
          </Space>
        );
      },
    },
  ];

  useEffect(() => {
    getList();
  }, []);

  return (
    <div>
      <Table columns={columns} dataSource={list} rowKey="username"></Table>

      <Modal
        open={isOpen}
        onOk={() => {
          setIsOpen(false);
          handleEdit();
        }}
        onCancel={() => setIsOpen(false)}
      >
        <Row style={{ alignItems: "center", margin: 10 }}>
          <Col span={4}>用户名：</Col>
          <Col span={20}>
            <Input
              disabled
              value={editUser.username}
              onChange={(e) =>
                setEditUser({
                  ...editUser,
                  username: e.target.value,
                })
              }
            ></Input>
          </Col>
        </Row>
        <Row style={{ alignItems: "center", margin: 10 }}>
          <Col span={4}>昵称：</Col>
          <Col span={20}>
            <Input
              value={editUser.nickname}
              onChange={(e) =>
                setEditUser({
                  ...editUser,
                  nickname: e.target.value,
                })
              }
            ></Input>
          </Col>
        </Row>
        <Row style={{ alignItems: "center", margin: 10 }}>
          <Col span={4}>头像：</Col>
          <Col span={20}>
            <Input
              value={editUser.avator}
              onChange={(e) =>
                setEditUser({
                  ...editUser,
                  avator: e.target.value,
                })
              }
            ></Input>
          </Col>
        </Row>
        <Row style={{ alignItems: "center", margin: 10 }}>
          <Col span={4}>角色</Col>
          <Col span={20}>
            <Select
							style={{ width: '100%' }}
              value={editUser.role}
              onChange={(e) =>
                setEditUser({
                  ...editUser,
                  role: e,
                })
              }
              options={[
                { value: "admin", label: "admin" },
                { value: "test", label: "test" },
                { value: "user", label: "user" },
              ]}
            ></Select>
          </Col>
        </Row>
      </Modal>
    </div>
  );
};

export default Index;
